<script setup lang="ts">
import router from "@/router";
import { CirclePlusFilled, House } from "@element-plus/icons-vue";
</script>

<template>
  <div class="common-layout">
    <el-container>
      <!-- 头部 -->
      <el-header class="main-header">
        <div class="header-container">
          <div class="brand-group">
            <img class="brand-logo" src="@/assets/logo.svg" alt="鱼籽代码生成器">
            <h1 class="brand-title">鱼籽代码生成器</h1>
          </div>

          <nav class="main-nav">
            <div class="nav-item" @click="router.push('/main')">
              <el-icon class="nav-icon"><House /></el-icon>
              <span class="nav-label">主页</span>
            </div>
            <div class="nav-item" @click="router.push('/add')">
              <el-icon class="nav-icon"><CirclePlusFilled /></el-icon>
              <span class="nav-label">创建生成器</span>
            </div>
          </nav>

          <div class="action-group">
            <el-button type="primary" class="auth-btn" >
              <router-link to="/login" class="btn-link">登 录</router-link>
            </el-button>
            <el-button type="success" class="auth-btn" >
              <router-link to="/register" class="btn-link">注 册</router-link>
            </el-button>
          </div>
        </div>
      </el-header>

      <!-- 主体内容 -->
      <el-main class="main-content">
        <div class="content-wrapper">
          <el-steps class="process-steps" :active="1" align-center>
            <el-step title="步骤一" description="基本信息" />
            <el-step title="步骤二" description="模型配置" />
            <el-step title="步骤三" description="文件配置" />
            <el-step title="步骤三" description="生成器文件" />
          </el-steps>
          <router-view class="router-view" />
        </div>
        <router-view></router-view>
      </el-main>

      <!-- 页脚 -->
      <el-footer class="footer">
        <div class="footer-content">
          <a href="https://gitee.com/wangfenghuan3399/yuzi-generator" target="_blank" class="footer-link">
            <img src="@/assets/gitee.svg" alt="Gitee开源仓库" class="gitee-logo">
            <span class="footer-text">鱼籽代码生成器-Gitee 开源仓库</span>
          </a>
        </div>
      </el-footer>
    </el-container>
  </div>
</template>

<style scoped lang="less">
@primary-color: #409EFF;
@success-color: #67C23A;
@text-primary: #303133;
@text-regular: #606266;
@border-color: #EBEEF5;
@shadow-light: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

.common-layout {
  height: 100vh;
  display: flex;
  background: #f8fafc;

  .el-container {
    height: 100%;
    flex-direction: column;

    // 头部样式
    .main-header {
      height: 64px;
      padding: 0 32px;
      background: white;
      box-shadow: @shadow-light;
      border-bottom: 1px solid @border-color;

      .header-container {
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .brand-group {
          display: flex;
          align-items: center;
          gap: 12px;
          transition: transform 0.3s;

          &:hover {
            transform: translateX(5px);

            .brand-logo {
              transform: rotate(-15deg);
            }
          }

          .brand-logo {
            height: 40px;
            transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
          }

          .brand-title {
            margin: 0;
            font-size: 22px;
            font-weight: 600;
            color: @text-primary;
            letter-spacing: 1px;
          }
        }

        .main-nav {
          display: flex;
          gap: 40px;
          margin-left: 60px;

          .nav-item {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 8px 16px;
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

            &:hover {
              background: lighten(@primary-color, 40%);

              .nav-icon {
                color: @primary-color;
                transform: scale(1.15);
              }

              .nav-label {
                color: @primary-color;
                font-weight: 500;
              }
            }

            .nav-icon {
              font-size: 20px;
              color: @text-regular;
              transition: all 0.3s;
            }

            .nav-label {
              font-size: 16px;
              color: @text-regular;
              transition: color 0.3s;
            }
          }
        }

        .action-group {
          display: flex;
          gap: 16px;

          .auth-btn {
            padding: 10px 28px;
            font-weight: 500;
            transition: all 0.3s;

            &:hover {
              transform: translateY(-2px);
              box-shadow: @shadow-light;
            }

            .btn-link {
              color: white;
              text-decoration: none;
              letter-spacing: 1px;
            }
          }
        }
      }
    }

    // 主体内容样式
    .main-content {
      padding: 0;
      flex: 1;

      .content-wrapper {
        max-width: 1200px;
        margin: 0 auto;
        padding: 32px 24px;

        .process-steps {
          margin-bottom: 40px;
          padding: 24px;
          background: white;
          border-radius: 8px;
          box-shadow: @shadow-light;

          :deep(.el-step__title) {
            font-size: 16px;
            font-weight: 500;
          }

          :deep(.el-step__description) {
            font-size: 14px;
            color: @text-regular;
          }
        }

        .router-view {
          min-height: 400px;
          padding: 32px;
          background: white;
          border-radius: 8px;
          box-shadow: @shadow-light;
        }
      }
    }

    // 页脚样式
    .footer {
      background: transparent;
      padding: 20px 0;

      &-content {
        .footer-link {
          display: flex;
          align-items: center;
          gap: 8px;
          text-decoration: none;
          transition: all 0.3s ease;

          &:hover {
            transform: translateY(-2px);

            .footer-text {
              color: #409EFF;
            }

            .gitee-logo {
              filter: brightness(1.2);
            }
          }
        }

        .footer-text {
          color: #7f8c8d;
          font-size: 14px;
          transition: color 0.3s ease;
        }

        .gitee-logo {
          width: 28px;
          height: 28px;
          transition: all 0.3s ease;
        }
      }
    }
  }
}

// 响应式设计
@media (max-width: 992px) {
  .common-layout {
    .el-container {
      .main-header {
        padding: 0 24px;

        .header-container {
          .main-nav {
            gap: 24px;
            margin-left: 32px;
          }

          .action-group {
            gap: 12px;

            .auth-btn {
              padding: 8px 20px;
            }
          }
        }
      }

      .main-content {
        .content-wrapper {
          padding: 24px 16px;
        }
      }
    }
  }
}

@media (max-width: 768px) {
  .common-layout {
    .el-container {
      .main-header {
        height: auto;
        padding: 16px;

        .header-container {
          flex-wrap: wrap;
          gap: 16px;

          .brand-group {
            order: 1;
          }

          .main-nav {
            order: 3;
            width: 100%;
            justify-content: center;
            margin: 16px 0 0;
            gap: 16px;
          }

          .action-group {
            order: 2;
            margin-left: auto;
          }
        }
      }

      .main-content {
        .content-wrapper {
          padding: 16px;

          .process-steps {
            padding: 16px;

            :deep(.el-step__title) {
              font-size: 14px;
            }

            :deep(.el-step__description) {
              display: none;
            }
          }

          .router-view {
            padding: 16px;
          }
        }
      }
    }
  }
}
</style>
